<template>
	<view>
		<Header title="我的"></Header>
		<view class="bubble-background">
			<view class="bubble-one"></view>
		</view>
		<view class="container">
			<!-- 头像，名称，班级，学校 -->
			<view class="user-avatar-school">
				<view class="avatar-box">
					<image src="../../static/userCode.png" class="avatar"></image>
				</view>
				<view class="school-name">
					<!-- <view class="name">{{info.ownerName}} | {{info.gradeName}}</view> -->
					<view class="name">{{info.ownerName || '---'}} <text style="color: #fa4472">{{info.isSign?'已签约代扣':(info.isGather?'已采集未签约':'未采集')}}</text></view>
					<view class="school">{{info.organizationName}}</view>
					<view class="school">{{info.gradeName}}</view>
					<view style="display: flex;align-items: center;font-size: 24upx;	">
						<!-- <view style="color: #fa4472;">{{info.isSign?'已签约代扣':(info.isGather?'已采集未签约':'未采集')}}</view> -->
						<view :class="info.cardNo?'':'trans'">卡号：{{info.cardNo}}</view>
					</view>
				</view>
			</view>
			<view class="box">
				<block v-for="(item,index) in faceList" :key="index">
					<view class="item" @click="toPath(index,2)">
						<image :src="item.imgUrl"></image>
						<view>{{item.type}}</view>
					</view>
				</block>
			</view>
			<view class="milk-box" v-if="milkList.length>0">
				<view class="title left-line">牛奶小知识</view>
				<view class="milk-list">
					<block v-for="(item,index) in milkList" :key="index">
						<view class="item" @click="goDetails(item.id)">
							<view class="left">{{item.title}}</view>
							<image class="let-go" src="../../static/img/go.png"></image>
						</view>
					</block>
				</view>
			</view>
		</view>
		<!-- 手机号输入弹窗 -->
		<PhoneModal :modalInfo='modalInfo' @modalCancel='modalCancel' @modalConfirm='modalConfirm' ></PhoneModal>
	</view>
</template>

<script>
	import { WEXIN_APPID, HUASHOU_SUPPORT, SHOW_MAKECARD, IS_NORMAL } from '@/config.js';
	import PhoneModal from '@/components/phone-modal/phoneModal'
	export default {
		components:{
			PhoneModal
		},
		data() {
			return {
				isHsSupport: HUASHOU_SUPPORT,
				info:uni.getStorageSync('info'),
				baseUrl: getApp().globalData.baseUrl,
				faceList: [
					{
						imgUrl: '../../static/img/qiehuan.png',
						type: '切换用户',
						path: '/pages/changeCard/changeCard'
					},
					{
						imgUrl: '../../static/img/bangzhu.png',
						type: '操作手册',
						path: '/pages/help/help'
					},
					{
						imgUrl: '../../static/img/yingyezhizhao.png',
						type: '营业执照',
						path: '/pages/filesList/bsLicense'
					},
					{
						imgUrl: '../../static/img/dangan.png',
						type: '放心档案',
						path: '/pages/filesList/qualityList'
					},
					{
						imgUrl: '../../static/img/setLog.png',
						type: '修改日志',
						path: '/pages/limitLog/limitLog'
					},
					{
						imgUrl: '../../static/img/privacy.png',
						type: '隐私协议',
						path: '/pages/privacyList/privacyList'
					},
						// {
						// 		imgUrl: '../../static/img/buka.png',
						// 		type: '补卡',
						// 		path: '/pages/repairCard/repairCard'
						// }
				],
				milkList: [],
				isMember: false,
				modalInfo: {
					showModal: false,
					title: '绑定家长手机',
					placeholder: '请输入手机号',
					content: ''
				}
			}
		},
		onLoad(e) {
			this.isMember = uni.getStorageSync('isMember')
			if(!this.isMember) return;
		},
		onShow(e) {
			this.isMember = uni.getStorageSync('isMember')
			if(!this.isMember) return;
			this.getCardList()
			if(this.milkList.length==0) this.getMilkList()
		},
		methods: {
			disableClick(idx){
				if(this.faceList[idx].type=='操作手册'){
					return uni.navigateTo({
						url: '/pages/help/help'
					})
				}
				uni.showModal({
					content: '您还未登录，请扫一校一码进行登录。',
					success: (res) => {
						
					}
				})
			},
			modalCancel() {
				this.modalInfo.showModal = false;
			},
			modalConfirm(phone) {
				if (!/^1[3|4|5|6|7|8|9][0-9]{9}$/.test(phone)) {
					return uni.showToast({
						title: '请输入正确的手机号！',
						icon: 'none'
					});
				} else {
					uni.showModal({
						title: '号码核对',
						content: `您将使用 ${phone} 与微信采集签约'刷脸支付'功能`,
						success: (res) => {
							if(res.confirm){
								this.modalInfo.showModal = false
								console.log('手机号',phone)
								this.toMiniProgram(phone);
							}
						}
					})
				}
			},
			cardUnLock(){
				uni.showLoading({
					title: '解锁中...'
				})
				let that = this;
				this.$http('/common/api/k12/unLock?memberCardId='+this.info.id,{},res=>{
					uni.hideLoading()
					if(res.data.value){
						uni.showToast({
							title: '解锁成功！',
							success: function(){
								that.getCardList(uni.getStorageSync('info').dataTypeFlag)
								for(let i in that.faceList){
									if(that.faceList[i].path=='解锁卡'){
										that.faceList[i] = {
											imgUrl: '../../static/img/suoka.png',
											path: '锁卡',
											type: '锁卡'
										}
										break
									}
								}
							}
						})
					}
				})
			},
			cardLock(){
				uni.showLoading({
					title: '锁卡中...'
				})
				let that = this;
				this.$http('/common/api/k12/lock?memberCardId='+this.info.id,{},res=>{
					uni.hideLoading()
					if(res.data.value){
						uni.showToast({
							title: '锁卡成功！',
							success: function(){
								that.getCardList(uni.getStorageSync('info').dataTypeFlag)
								for(let i in that.faceList){
									if(that.faceList[i].path=='锁卡'){
										that.faceList[i] = {
											imgUrl: '../../static/img/jiesuo.png',
											path: '解锁卡',
											type: '解锁卡'
										}
										break
									}
								}
							}
						})
					}
				})
			},
			goDetails(id){
				uni.navigateTo({
					url: '/pages/my/milkDetails?id='+ id
				})
			},
			getMilkList(){
				this.$http('/service/api/milkKnowledge/list',{},res=>{
					if(res.data.succeeded) this.milkList = res.data.data
				})
			},
			decryptPhone(value) {
				if (value === null || value === undefined || value.trim() === '') {
				  return Promise.resolve('');
				}
				return new Promise((resolve,reject)=>{
						this.$http('/kernel/api/privacy/decryptPhone',{"CipherTexts":[value] }, res=>{
							try{
								if(res.data.data.length>0){
										resolve(res.data.data[0].phone) 
									}else{
										resolve(value)
									}
							}catch(e){
								resolve(value)
							}
						})
				})
			},
			async toMiniProgram(phone){
				let that = this
				let signPhone = await this.decryptPhone(phone)
				console.log(signPhone)
				this.$http('/pay/api/offlineFacePay/getToken', {
					"organization_id": this.info.wxOrganizationId,
					"out_user_id": this.info.id.replace(/-/g, "")
				}, res => {
					let schoolList = []
					schoolList.push(this.info.organizationName)
					wx.navigateToMiniProgram({
						appId: 'wx5931af4836330935', //小程序id
						path: '/pages/face_index/index?is_first=1', //小程序路径
						extraData: {
							type: 'sign', //签约跳转
							user_name: this.info.ownerName, //刷脸用户姓名
							school_name: this.info.organizationName, //学校
							cert_info: {
								'cert_type': 'IDCARD',
								'cert_id': '123',
								'name': this.info.ownerName
							}, //cert_type:IDCARD（身份证）,EEP_HK_MACAU（港澳通行证）,PASSPORT_NO（护照）；cert_id:证件号;name:姓名
							user_type: 'STUDENT', //职业(STUDENT：学生,STAFF：职员)
							student_info: {
								'class_name': this.info.gradeName
							}, //class_name:班级。student_info和staff_info二选一
							// staff_info:{'occupation':'教师'}, //occupation:职业 student_info和staff_info二选一
							school_list: schoolList, //学校列表
							organization_id: this.info.wxOrganizationId, //organazition_id
							out_user_id: this.info.id.replace(/-/g, ""), //out_user_id
							account: signPhone, //签约手机号
							token: res.data.token
							
						},
						success(res) {
							that.isShow = false
							// 成功跳转到签约小程序 
						}
					})
				})
			},
			// 解约
			terminateContract(id){
				uni.showModal({
					content: '确认要解约用户？',
					success: res=>{
						if(res.confirm){
							this.$http('/service/api/student/terminateContract',[id],res=>{
								uni.showToast({
									icon: 'none',
									title: res.data.data === ""? '解约成功!': res.data.data
								})
							})
						}
					}
				})
				
			},
			toPath(index,type) {
				let url
				let that =this;
				if (!this.isMember) {
					return this.disableClick(index)
				}
				if(type == 1){
					if(this.cardList[index]){
						url = this.cardList[index].path
					}
				}else if(type == 2){
					if(this.faceList[index]){
						url = this.faceList[index].path	
					}
				}
				if (url == '代扣签约') {
					this.toMiniProgram(this.info.phone)
				}
				if (url == '解约') {
					this.terminateContract(this.info.id)
				}
				//liping 2022-03-19
				else if(url == '农行支付'){
						uni.showModal({
							content:'请关闭此小程序，通过公众号菜单 -- 农行充值，完成充值操作。',
							success(res) {
							}
						})
				}
				else if(url == '锁卡'){
					uni.showModal({
						content: '确认锁卡吗？',
						success(res) {
							if(res.confirm){
								that.cardLock()
							}
						}
					})
				}
				else if(url == '解锁卡'){
					uni.showModal({
						content: '确认解锁吗？',
						success(res) {
							if(res.confirm){
								that.cardUnLock()
							}
						}
					})
				}
				//-----------------------------------
				else if(url == '/pages/addCaiji/addCaijiXiaonei?canBack=1'){
					uni.navigateTo({
						url: url+'&orId='+ this.info.organizationId + '&organizationName=' + this.info.organizationName
					})
				}
				else {
					// uni.navigateTo({
					// 	url: url
					// })
					
					if(url=='商城'){
							wx.navigateToMiniProgram({
								appId: WEXIN_APPID,
							  path:'/pages/niuniuIndex/niuniuIndex',  //小程序路径
							  success(res) {
							    // 成功跳转到签约小程序 
							  },
							  fail(res) {
							    // 未成功跳转到签约小程序 
							  }
							})
						}else{
							if(this.info||url=='/pages/bind/bind?istianjia=1'){
								uni.navigateTo({
									url:url
								})
							}else{
								uni.showModal({
									title:'温馨提示',
									content:'您还未绑定卡，点击确定前往绑定',
									success(res) {
										if (res.confirm) {
											uni.navigateTo({
												url:'/pages/bind/bind?istianjia=1'
											})
										} else if (res.cancel) {
										}
									}
								})
							}
						} 
				}
			},
			getCardList(type) {
				this.$http('/minprogram/api/member/getOwnerMemberCardList', {
					condition: {
						dataTypeFlag: type ? type : ''
					}
				}, async res => {
					if (res.data.items.length > 0) {
						let flag = true
						let defaultInfo = {}
						for (let i = 0; i < res.data.items.length; i++) {
							if (res.data.items[i].isDefault) {
								defaultInfo = res.data.items[i]
								defaultInfo.ownerName = await this.decryptPhone(defaultInfo.ownerName) || defaultInfo.ownerName
								defaultInfo.phone = await this.decryptPhone(defaultInfo.phone) || defaultInfo.phone
								this.info = defaultInfo
								flag = false
								break;
							}
						}
						if (flag) {
							defaultInfo = res.data.items[0]
							defaultInfo.ownerName = await this.decryptPhone(defaultInfo.ownerName) || defaultInfo.ownerName
							defaultInfo.phone = await this.decryptPhone(defaultInfo.phone) || defaultInfo.phone
							this.info = defaultInfo
						}
						if(this.info.isRefundAmount === true){
							this.faceList.push({
									imgUrl: '../../static/img/jilu.png',
									type: '申请退款',
									path: '/pages/refundLast/refundLast'
								})
						}
						if(this.info.organizationStatusFlag == 2){
							this.faceList.push({
									imgUrl: '../../static/img/jiesuo.png',
									type: '解约',
									path: '解约'
								})
						}
				
						if (this.info.dataTypeFlag == 2) {
							let obj
							if (!this.info.isSign) {
								if (!this.info.isGather) {
									obj = {
										imgUrl: '../../static/img/caiji.png',
										type: '开通人脸服务',
										path: '代扣签约'
									}
									if (this.changeFlag) {
										this.changeFlag = false
										this.tocaiji()
									}
								} else {
									obj = {
										imgUrl: '../../static/img/qianyue.png',
										type: '代扣签约',
										path: '代扣签约'
									}
									if (this.changeFlag) {
										this.changeFlag = false
										this.toqianyue()
									}
								}
			
							} else {
								obj = {
									// imgUrl: '../../static/icon/icon_jiesuo.png',
									imgUrl: '../../static/img/jiesuo.png',
									type: '关闭刷脸',
									path: '/pages/closeFace/closeFace'
								}
							}
							// this.$set(this.faceList, 4, obj)
							// this.$set(this.faceList, 7, obj)
							await this.getCanRecharge()
							this.faceList.push(obj)
							this.faceList = Array.from(new Set(this.faceList.map(JSON.stringify))).map(JSON.parse);
							this.isShow = true
			
						} else {
							uni.setStorageSync('cardNo', this.info.cardNo)
							this.isShow = true
						}
			
						uni.setStorageSync('info', this.info)
					} else {
						uni.reLaunch({
							url: '/pages/addCaiji/addCaijiXiaonei'
						})
						// uni.reLaunch({
						// 	url:'/pages/exit/exit'
						// })
					}
			
				})
			},
			getCanRecharge() {
				return new Promise((suc, fal) => {
					if (this.isLoad) return suc();
					// if (this.info.roleFlag == 2) {
					// 	this.faceList.push({
					// 		imgUrl: '../../static/class.png',
					// 		type: '班级专区',
					// 		path: '/pages/banzhuren/banzhurenIndex'
					// 	})
					// }
					//wangk update 2020-03-10
					if (this.info.pageTags&&this.info.pageTags.includes('商城')) {
						this.faceList.push({
							imgUrl: '../../static/img/shangcheng.png',
							type: '商城',
							path: '/pages/shopMall/shopMall'
						})
					}
					//-----------------------------------
					
					//liping 2022-03-19
					if (this.info.pageTags&&this.info.pageTags.includes('农行支付')) {
						this.faceList.push({
							imgUrl: '../../static/icon/icon_chongzhi.png',
							type: '农行支付',
							path: '农行支付'
						})
					}
					// --------------23-5-22 李平 优惠券--------------
					if(this.info.pageTags&&this.info.pageTags.includes('0')){
						this.faceList.push({
							imgUrl: '../../static/img/jilu.png',
							type: '体验金',
							path: '/pages/myCoupon/myCoupon'
						})
					}
					// --------------23-5-22 李平 优惠券--------------
					
					if(SHOW_MAKECARD){
						if (this.info.cardNo&&this.info.chipNo){
							this.faceList.push({
									imgUrl: '../../static/img/buka.png',
									type: '补卡',
									path: IS_NORMAL?'/pages/repairCard/repairCard': '/pages/repairCard/repairCard_custom'
							})
						}
						if (this.info.cardNo&&this.info.chipNo && this.info.statusFlag != 2){
							this.faceList.push({
									imgUrl: '../../static/img/suoka.png',
									type: '锁卡',
									path: '锁卡'
							})
						}
						if (this.info.cardNo&&this.info.chipNo && this.info.statusFlag == 2){
							this.faceList.push({
									imgUrl: '../../static/img/jiesuo.png',
									type: '解锁卡',
									path: '解锁卡'
							})
						}
					}
					
					// wangk 2022-04-01 add
					if (this.info.pageTags&&this.info.pageTags.includes('代扣添加学生信息')) {
						this.faceList.push({
							imgUrl: '../../static/img/chongzhi.png',
							type: '绑定多个',
							path: '数据维护',
						})
					}
					
					this.$http('/minprogram/api/member/getRechargeActivityAmountNew?memberCardId=' + this.info
						.id, {}, res => {
									this.faceList.push({
										// imgUrl: '../../static/icon/icon_jilu.png',
										imgUrl: '../../static/img/jilu.png',
										type: '充值记录',
										path: '/pages/rechargeRecord/rechargeRecord'
									})
							this.isLoad = true
							suc()
						}, 'GET', fal)
				})
			},
		}
	}
</script>

<style scoped lang="less">
	
	.up{
		transition: all 0.4s;
		transform: rotateX(180deg);
		transform-origin: 0 50%;
	}
	.down{
		transition: all 0.4s;
		transform: rotateX(0deg);
		transform-origin: 0 50%;
	}
	.user-avatar-school{
		padding: 30upx 20upx 60upx;
		display: flex;
		position: relative;
		.corner-mark-box{
			width: 170rpx;
			height: 156rpx;
			position: absolute;
			right: -26rpx;
			top: -26rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.avatar-box{
			width: 120upx;
			height: 120upx;
			border-radius: 50%;
			padding: 10upx;
			background: #fff;
			margin-right: 36upx;
			.avatar{
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}
		.school-name{
			>view{margin-top: 16upx;}
			.name{ font-size: 32upx; text{ font-size: 24upx;margin-left: 6upx; }}
			.school{ font-size: 26upx; width: 456upx; }
			.trans{ color: transparent; }
		}
	}
	.plader{
		color: #808080
	}
	.box{
		border-radius: 16upx;
		background: #fff;
		// box-shadow: 0 0 15upx rgba(247, 200, 122, .2);
		box-shadow: 0 3upx 20upx 1upx rgba(247, 200, 122, .2);
		padding: 44upx 20upx 0;
		display: flex;
		flex-wrap: wrap;
		.item{
			width: 25%;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-bottom: 58upx;
			image{
				// width: 64upx;
				width: 46upx;
				// height: 64upx;
				height: 46upx;
				margin-bottom: 16upx;
			}
			view{
				font-size: 26upx;
			}
		}
		
	}
	
	.complaint-box{
		margin-top: 26upx;
		.label{
			padding: 36upx 0 20upx;
			font-size: 26upx;
			width: 590upx;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			border-bottom: 1px solid #ccc;
			.title{
				width: 140upx;
			}
			.selected.ipt{
				width: 450upx;
			}
			.pickers{
				width: 450upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 26upx;
				image{
					width: 20upx;
					height: 20upx;
				}
			}
			.selected.tarea{
				width:590upx;
				height: 160upx;
				textarea{
					width: 100%;
					height: 100%;
					padding: 20upx 10upx 10upx;
					font-size: 26upx;
				}
			}
			.pic-list{
				margin: 36upx 0 20upx;
				width: 590upx;
				height: 190upx;
				display: flex;
				align-items: center;
				.pic{
					width: 190upx;
					height: 190upx;
					border-radius: 12upx;
					position: relative;
					image{
						width: 100%;
						height: 100%;
						border-radius: 12upx;
					}
					.delete-pic{
						position: absolute;
						width: 24upx;
						height: 24upx;
						border-radius: 50%;
						background: red;
						text-align: center;
						line-height: 24upx;
						font-size: 16upx;
						color: #fff;
						right: 0;
						top: 0;
					}
				}
				.pic~.pic{
					margin-left: 10upx;
				}
				.add-pic{
					width: 190upx;
					height: 190upx;
					background: #f4f4f4;
					border-radius: 16upx;
					position: relative;
					margin-left: 10upx;
				}
				.add-pic::before{
					content: '';
					display: inline-block;
					width: 60upx;
					height: 6upx;
					background: #ababab;
					position: absolute;
					left: 65upx;
					top: 92upx;
				}
				.add-pic::after{
					content: '';
					display: inline-block;
					width: 6upx;
					height: 60upx;
					background: #ababab;
					position: absolute;
					left: 92upx;
					top: 65upx;
				}
			}
		}
		.btn{
			width: 100%;
			height: 80upx;
			line-height: 80upx;
			text-align: center;
			border-radius: 16upx;
			color: #fff;
			background: #49b9ad;
			margin: 160upx 0 40upx;
		}
	}
	.milk-box{
		background: #fff;
		border-radius: 16upx;
		// box-shadow: 0 0 15upx rgba(247, 200, 122, .2);
		box-shadow: 0 3upx 20upx 1upx rgba(247, 200, 122, .2);
		margin-top: 30upx;
		padding: 20upx;
		.title{
			font-size: 30upx;
			font-weight: bold;
			color: #333;
		}
		.milk-list{
			margin-top: 26upx;
			font-size: 26upx;
			padding-left: 28upx;
			width: 582upx;
			.item{
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 78upx;
				// font-size: 30upx;
				.left{
					width: 526upx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				.let-go{
					width: 20upx;
					height: 20upx;
				}
			}
			.item~.item{
			}
		}
	}
	.bubble-background {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
		z-index: -1;
		.bubble-one{
			position: absolute;
			top: -5%;
			left: -2%;
			width: 240rpx;
			height: 240rpx;
			border-radius: 50%;
			background: linear-gradient(to bottom right, #ffa227 0%, #fbb553 50%, #f7c678 100%);
			// opacity: 0.5;
			z-index: -2;
		}
	}
	 
	.bubble-background::before,
	.bubble-background::after {
		content: '';
		position: absolute;
		width: 220rpx;
		height: 220rpx;
		border-radius: 50%; 
		background: rgba(255, 255, 255, .4);
		background: linear-gradient(to bottom right, #ffa227 0%, #fbb553 50%, #fffdfb 100%);
		// opacity: 0.5;
	}
	 
	.bubble-background::before {
		top: 4%;
		left: -8%;
	}
	 
	.bubble-background::after {
		width: 170rpx;
		height: 170rpx;
		top: 8%;
		right: -6%;
	}
</style>
